<template>
  <div style="margin-left: 10%;margin-right: 10%;">

    <div style="width: 100%;height: 500px;background-color: red;display: flex">
      <img :src="bookData.imageUrl"
           style="width: 260px;height: 380px;margin-top: auto;margin-bottom: auto;margin-left: 5%">
      <div style="margin-left: 3%">
        <div style="color: white;font-size: 20px;margin-top: 100px">
          <h1>{{ bookData.title }}</h1>
          <span>{{ bookData.author }}</span><br><br><br>
          <!--<span style="margin-top: 20px;font-size: 26px">￥ {{ bookData.price }}</span><br>-->
          <span>
            <el-rate size="small" disabled v-model="bookData.score"/>
          </span><br><br>
          <el-button v-if="bookData.isCollect" @click="collect(bookData.bookId, false)"
                     style="height: 45px;width: 120px;" type="success" round color="#ee1212">
            已收藏
          </el-button>
          <el-button v-else @click="collect(bookData.bookId, true)" style="height: 45px;width: 120px;" type="success" round color="white">
            ✚ 收藏
          </el-button>
          <el-button @click="dialogTableVisible = true" style="height: 45px;width: 120px;" type="success" round color="white">
            借阅
          </el-button>
        </div>
      </div>
    </div>

    <el-dialog v-model="dialogTableVisible" title="确认信息">
      <el-form
          label-position="left"
          :model="ruleForm"
          :rules="rules"
          label-width="150px"
          status-icon
      >
        <el-form-item  label="书名" prop="title">
          {{ ruleForm.title }}
        </el-form-item>
        <el-form-item  label="作者" prop="author">
          {{ ruleForm.author }}
        </el-form-item>
        <el-form-item  label="借阅人" prop="username">
          {{ ruleForm.username }}
        </el-form-item>
        <el-form-item prop="date" label="选择归还时间">
          <el-date-picker
              :disabled-date="disabledDate"
              v-model="ruleForm.date"
              type="date"
              label=""
              placeholder="Pick a date"
              style="width: 100%"
              value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
        <span style="color: red">
          备注: 在工作日17:00前归还,最大期限15天
        </span>
        <el-form-item style="margin-top: 10px">
          <el-button type="primary" @click="submitForm()">
            确定
          </el-button>
          <el-button @click="resetForm()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <div style="margin-top: 30px;margin-left: 5%">
      <MyButtonGroup :data-list="butList" @me-click="myClick"></MyButtonGroup>
    </div>

    <div style="margin-left: 8%;margin-top: 50px;margin-right: 8%;color: #8f8787">
      {{ desc }}
    </div>
  </div>
</template>

<script setup>
import { reactive, ref} from 'vue'
import MyButtonGroup from "../Slither/MyButtonGroup.vue";
import axios from "../../axios/index.js";
import {ElMessage} from "element-plus";
import { useRoute } from 'vue-router'
import store from "../../store/index.js";

const disabledDate = (time) => {
  return time.getTime() > (Date.now()+ (3600 * 1000 * 24 * 15))
      || time.getTime() <= Date.now()
}

const ruleForm = reactive({
  bookId: 0,
  title: 'Hello',
  author: 'Hello',
  username: 'Hello',
  date: ''
})

const rules = reactive({
  date: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a date',
      trigger: 'change',
    }
  ]
})

const submitForm = () => {
  axios.post("/borrow/add", ruleForm).then(res=>{
    ElMessage.success("借阅成功，请在xxx取书！");
    dialogTableVisible.value = false;
  }).catch(error => {
    ElMessage.error(error)
  })
}

const resetForm = () => {
  dialogTableVisible.value = false;
}


const dialogTableVisible = ref(false)

let bookData = reactive({
  bookId: useRoute().query.id,
  title: '我是鲁滨逊',
  imageUrl: '',
  author: "鲁滨逊",
  score: 3,
  summary: "无",
  authorDesc: '',
  evaluate: '',
  isCollect: false
})
bookData.bookId = useRoute().query.id;

let desc = ref("")

const butList = ref([
  '图书摘要','作者简介','图书评论'
])

const myClick = (index)=>{
  //console.log("发射上来的 " + index)
  if (index === 0) {
    desc.value = bookData.summary
  }
  if (index === 1) {
    desc.value = bookData.authorDesc
  }
  if (index === 2) {
    desc.value = bookData.evaluate
  }
}

const getBookData = ()=>{
  axios.get('/book/detail/'+ useRoute().query.id).then(res => {
    let temp = res.data.data;
    //console.log(temp);
    bookData.bookId=temp.bookId
    bookData.title=temp.title
    bookData.imageUrl=temp.imageUrl
    bookData.author=temp.author
    bookData.price=temp.price
    bookData.score=temp.score
    bookData.summary=temp.summary
    bookData.authorDesc=temp.author
    bookData.evaluate=temp.summary
    //bookData.isCollect=temp.isCollect
    desc.value = temp.summary;

    ruleForm.bookId = temp.bookId;
    ruleForm.title = temp.title;
    ruleForm.author = temp.author;
    ruleForm.username = store.getters.getUser.username;

  }).catch(error => {
    ElMessage.error(error)
  })

  if (store.getters.getToken !== null && store.getters.getToken !== '') {
    axios.get("/collect/select/"+ useRoute().query.id).then((res)=>{
      if (res.data.data === 1) {
        bookData.isCollect=true;
      } else {
        bookData.isCollect=false;
      }
    }).catch(error => {
      ElMessage.error(error)
    })
  }

}
getBookData()

const collect = (id, flag)=>{
  if (flag) {
    axios.get("/collect/add/" + id).then(res=>{
      //console.log(res.data.data);
      bookData.isCollect = true;
    }).catch(error => {
      ElMessage.error(error)
    })
  }else {
    //axios.post("/collect/del",{
    //  delList: [id]
    //}).then(res=>{
    axios.get("/collect/add/" + id).then(res=>{
      //console.log(res.data.data);
      bookData.isCollect = false;
    }).catch(error => {
      ElMessage.error(error)
    })
  }

}

</script>

<style scoped>
.el-rate{
  --el-rate-icon-margin: 0px;
  --el-rate-icon-size: 18px;
  --el-rate-fill-color: yellow;
}

/*!*按钮点击*!*/
/*.el-button:focus {*/
/*  background: red !important;*/
/*  color: white !important;*/
/*  font-weight: bold;*/
/*  border-color: red !important;*/
/*}*/

/*按钮悬浮*/
.el-button:hover:not(.el-button:hover) {
  background: red !important;
  color: white !important;
  font-weight: bold;
  border-color: red !important;
}

.el-button:active {
  background: #126c9e !important;
  font-weight: bold;
}


</style>
